<template>
  <div class="app-container">
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item label="支付成功后自动关闭" label-width="100">
        <el-switch v-model="formData.autoGetAmount"></el-switch>
      </el-form-item>

      <el-form-item label="语音播报">
        <el-switch v-model="formData.voiceAnnouncements"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="resetting">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Message } from "element-ui";

const form = ref();
const formData = ref({
  autoGetAmount: false,
  voiceAnnouncements: false,
});

onMounted(() => {
  //获取配置
  if (JSON.parse(localStorage.getItem("remindSetup")) != null) {
    formData.value = JSON.parse(localStorage.getItem("remindSetup"));
  }
});

//保存
const onSubmit = () => {
  localStorage.setItem("remindSetup", JSON.stringify(formData.value));
  Message({
    message: "保存成功!",
    type: "success",
  });
};

//重置
const resetting = () => {
  formData.value = {
    autoGetAmount: false,
    voiceAnnouncements: false,
  };
  Message({
    message: "重置成功!",
    type: "success",
  });
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

